<template>
	<view class="index-jgg">
		<view class="header">
			<view class="search-mar">
				<u-search :showAction='false' placeholder="搜索食谱教材" v-model="ipt1"></u-search>
			</view>
		</view>
		<view class="content">
			<view class="content-mar">
				<view class="tabs">
					<scroll-view style="white-space: nowrap;" scroll-x="true">
						<view @click="changeTabs(item,index)" v-for="(item,index) in jgg"
							:class="index==i?'tabs-item2':'tabs-item'">{{item.name}}</view>
					</scroll-view>
				</view>
				<view class="cards">
					<swiper class="swiper-box" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
						:duration="duration" circular="true" previous-margin="30px" next-margin="30px">
						<swiper-item @click="toDetail(item)" class="swi-item" v-for="(item, index) in shopList" :key="index">
							<view class="swiper-item">
								<view class="swi-imgbox">
									<view class="img">
										<image class="image" :src="item.img" mode="aspectFill" />
									</view>
									<view class="swi-title">
										<view class="swi-shopname">
											{{item.shopName}}
										</view>
										<view class="swi-shopname2">
											{{item.title}}
										</view>
										<view class="swi-zankan">
											<view class="zw">

											</view>
											<view class="swi-right">
												<view class="last-item1">
													<u-icon name="heart" color="#bbb" size="20"></u-icon>{{item.zan}}
												</view>
												<view class="last-item1">
													<u-icon name="eye" color="#bbb" size="20"></u-icon>{{item.kan}}
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getceshiDjm
	} from '../../../utils/api.js'
	export default {
		data() {
			return {
				ipt1: '',
				i: 0,
				shopList: [],
				newList: [],
				indicatorDots: false,
				autoplay: false,
				interval: 2000, //切换的间隔时间
				duration: 500, //滑动动画时长
				jgg: [{
						id: 1,
						name: '速食锅',
						img: '../../../static/icon/djm/dianciguo.png'
					},
					{
						id: 2,
						name: '家常锅',
						img: '../../../static/icon/djm/guo1.png'
					},
					{
						id: 3,
						name: '早餐锅',
						img: '../../../static/icon/djm/guo3.png'
					},
					{
						id: 4,
						name: '药膳锅',
						img: '../../../static/icon/djm/guo4.png'
					},
					{
						id: 5,
						name: '美味锅',
						img: '../../../static/icon/djm/huoguo.png'
					},
					{
						id: 6,
						name: '健康锅',
						img: '../../../static/icon/djm/huoguo_1.png'
					},
				],
			}
		},
		onLoad(option) {
			getceshiDjm().then((res) => {
				this.shopList = res.data
				this.newList = [...this.shopList]
				this.jgg.filter((item, index) => {
					if (item.name == option.name) {
						this.i = index
						this.shopList = this.newList.filter((item) => {
							if (option.name == item.type) {
								return item
							}
						})
					}
				})
			})

		},
		methods: {
			toDetail(item){
				uni.navigateTo({
					url:`/pages/tabbar-1-detail/tabbar-1-shopDetail/tabbar-1-shopDetail?id=${item.id}`
				})
			},
			changeTabs(items, index) {
				this.i = index
				this.shopList = this.newList.filter((item) => {
					if (items.name == item.type) {
						return item
					}
				})
			}
		}
	}
</script>

<style>
	.index-jgg {
		width: 100%;
	}

	.header {
		width: 100%;
		margin: 0 auto;
		padding: 20rpx 0;
		background-color: #fff;
	}

	.search-mar {
		width: 95%;
		margin: 0 auto;
	}

	.content {
		width: 100%;
	}

	.content-mar {
		width: 95%;
		margin: 0 auto;
	}

	.tabs {
		width: 100%;
	}

	.tabs-item {
		padding: 15rpx 40rpx;
		border: 1rpx solid #999999;
		display: inline-block;
		border-radius: 35rpx;
		margin: 10rpx;
		font-size: 24rpx;
		color: #999999;
	}

	.tabs-item2 {
		padding: 17rpx 50rpx;
		background-color: gold;
		display: inline-block;
		border-radius: 35rpx;
		margin: 10rpx;
		font-size: 24rpx;
		color: black;
		font-weight: bold;
	}

	.cards {
		width: 100%;
		margin-top: 40rpx;
	}

	.swiper-box {
		width: 95%;
		height: 1000rpx;
	}

	.swi-item {}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		color: #fff;
		box-shadow: 1rpx 1rpx 15rpx 1rpx rgba(185, 185, 185, 0.5);
		margin: 10px;
		border-radius: 30rpx;
		/* height: 380rpx; */
		overflow: hidden;
	}

	.swi-title {
		width: 90%;
		margin: 0 auto;
		padding: 30rpx 0;
		background-color: #fff;
	}

	.swi-imgbox {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	.img {
		/* height: 50%; */
	}

	.image {
		/* width: 100%; */
		/* width: 750rpx; */
		height: 700rpx;
	}

	.swi-shopname {
		color: black;
		width: 100%;
		font-size: 38rpx;
	}

	.swi-shopname2 {
		color: black;
		width: 100%;
		font-size: 27rpx;
		letter-spacing: 1rpx;
	}

	.swi-zankan {
		width: 100%;
		display: flex;
	}

	.zw {
		flex: 1;
	}

	.swi-right {
		flex: 1;
		display: flex;
		margin-top: 10rpx;
	}

	.last-item1 {
		display: flex;
		font-size: 20rpx;
		color: #999999;
		margin-right: 20rpx;
	}
</style>